<template>
  <div class="propaganda-page" v-if="!isClosed">
    <div class="propaganda-page-guide" @click="onSee">
      <img src="@src/assets/img/propagandaPage/quickStartCenter.png" class="icon-left" />
      <p>{{ propagandaData.guidTip }}</p>
      <el-button class="mar-l-5 mar-r-5" type="text" size="mini" v-if="propagandaData.btnText">{{ propagandaData.btnText }}</el-button>
        <i class="iconfont icon-xiangzuo-copy "></i>
      <i class="el-icon-close mar-l-8" v-if="isShowClose" @click.stop="close"></i>
    </div>
    <propaganda-page-modal :propagandaData="propagandaData" ref="propagandaPageModelRef"></propaganda-page-modal>
  </div>
</template>
<script>
import propagandaPageModal from './components/propagandaPageModal.vue'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
import { openAccurateTab } from '@src/util/platform'
import { getUserGuideStorageFor, creatServerCachApi } from '@src/api/GuideApi';

export default {
  name: 'PropagandaPage',
  components: {
    propagandaPageModal
  },
  props: {
    propagandaData: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      isClosed: false,
    };
  },
  computed: {
    storageKey() {
      return this.propagandaData?.storageKey
    },
    isShowClose() {
      return this.propagandaData?.showCloseIcon
    },
    jumpSmartPlanLanding() {
      return this.propagandaData?.jumpSmartPlanLanding
    }
  },
  mounted() {
    this.getPropagandaStorage()
  },
  methods: {
    handleClose() {},
    /** 去查看 */
    onSee() {
      // 显示升级智能计划弹窗
      if (this.propagandaData.type == 14) {
        return this.$emit('showUpgradeToSmartPlanDialog')
      }
      this.$refs.propagandaPageModelRef.open();
    },
    onClose() {},
    close() {
      this.isClosed = true
      this.setPropagandaStorage()
    },
    // 缓存数据
    setPropagandaStorage() {
      if (!this.storageKey) return 
      const params = { 
        isComplete: 1,
        step: 1,
        type: this.storageKey,
        userConfig: JSON.stringify({ isClosed: true })
      }
      creatServerCachApi(params)
    },
    // 获取缓存
    getPropagandaStorage() {
      if (!this.storageKey) return 
      getUserGuideStorageFor({type: this.storageKey}).then(res => {
        if (!res.succ) return
        const userConfig = JSON.parse(res?.data?.userConfig) ?? {}
        this.isClosed = !!userConfig.isClosed
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.propaganda-page {
  &-guide {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // width: 290px;
    height: 28px;
    line-height: 28px;
    border-radius: 60px;
    background: #fcf6ec;
    box-sizing: border-box;
    border: 1px solid #f3d19e;
    padding: 0 12px;
    cursor: pointer;
    min-width: 200px;
    .icon-left {
      width: 16px;
      height: 16px;
    }
    .iconfont {
      color: #E6A23C;
      flex: 1;
      font-size: 12px;
      text-align: right;
      }
    p {
      margin: 0 4px;
      font-size: 12px;
      line-height: 28px;
      margin-bottom: 0 !important;
      max-width: 300px;
      @include text-ellipsis();
    }
    .mar-r-5 {
      margin-right: 5px;
    }
  }
}
</style>
